<template>
  <div>
    <h3>1.v-model双向绑定</h3>
    <input type="text" v-model="value1" />
    <p>{{ value1 }}</p>

    <h3 v-show="value2">2.v-show点击消失</h3>
    <button @click="fn1">点我切换</button>

    <h3>3.v-if全家桶，这里有一个数：{{ value3 }}</h3>
    <p v-if="value3 == 6">v-if：value==6</p>
    <p v-else-if="value3 == 5">v-else-if：value==5</p>
    <p v-else>v-else</p>
    <button @click="fn2">点我切换</button>

    <h3>4.v-text</h3>
    <p v-text="value1"></p>

    <h3>5.v-html</h3>
    <p v-html="value4"></p>

    <h3>6.v-once</h3>
    <input type="text" v-model="value5" />
    <p v-once>{{ value5 }}</p>

    <h3>7.watch监听</h3>
    <input type="text" v-model="value6" />

    <h3>8.事件对象$event</h3>
    <div class="box" @click="fn3($event)">
      <div class="son"></div>
    </div>

    <h3>9.修饰符</h3>
    <h3>按键修饰符和ref：请输入空格</h3>
    <input type="text" ref="space" @keydown.space="fn4()" />
    <h3>事件修饰符</h3>
    <div class="father1" @click.capture="fn5()">
      <div class="son1" @click="fn6()">capture</div>
    </div>

    <h3>10.全局组件</h3>
    <QuanJu />

    <h3>11.逆向传值</h3>
    <button @click="fn7()">点我发送数据</button>
    <p>这里有个槽口</p>
    <slot></slot>

    <h3>12.路由守卫</h3>
    <h3>13.生命钩子</h3>
    <h3>14.全局混入mixin</h3>
    <p>{{ MiFun() }}</p>
    <h3>15.过滤器</h3>
    <p>{{ value8 | fil }}</p>
    <h3>16.自定义指令</h3>
    <p v-hhh>使用了inserted钩子函数，字体变红</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value2: true,
      value3: 7,
      value4: "<span>我是span元素<span>",
      value5: "首次加载，不再改变",
      value6: "",
      value7: "我是子数据的数据",
      value8: "123456465",
    };
  },
  methods: {
    fn1() {
      this.value2 = !this.value2;
    },
    fn2() {
      this.value3 = --this.value3;
      console.log(this.value3);
    },
    fn3(e) {
      console.log(e.target);
    },
    fn4() {
      this.$refs.space.style.marginLeft = "100px";
    },
    fn5() {
      alert("我是father");
    },
    fn6() {
      alert("我是son");
    },
    fn7() {
      this.$emit("divi", this.value7);
    },
  },
  watch: {
    value6(newval, oldval) {
      alert("新：" + newval + "旧：" + oldval);
    },
  },
  //? 组件内守卫
  beforeRouteEnter(to, from, next) {
    alert("我是组件内守卫：进入前");
    console.log(to);
    console.log(from);
    next();
  },
  beforeRouteLeave(to, from, next) {
    alert("我是组件内守卫：离开前");
    console.log(to);
    console.log(from);
    next();
  },
  //? 生命钩子
  beforeCreate() {
    alert("实例创建开始");
  },
  created() {
    alert("实例创建完毕");
  },
  beforeMount() {
    alert("模板渲染开始");
  },
  mounted() {
    alert("模板渲染完毕");
  },
  //? 局部过滤器
  filters: {
    fil(value8) {
      return value8.substr(0, 5);
    },
  },
  //? 自定义指令
    directives:{
        hhh:{
            inserted(el){
                el.style.color="red";
            }
        }
    }
};
</script>

<style scoped>
input,
button {
  border: 1px solid #000;
  width: 150px;
  padding: 5px 10px;
}
p {
  padding: 5px 10px;
}
.box {
  width: 150px;
  height: 150px;
  background: red;
}
.son {
  width: 50px;
  height: 50px;
  background: yellow;
}
.father1 {
  width: 150px;
  height: 150px;
  background: red;
}
.son1 {
  width: 50px;
  height: 50px;
  background: yellow;
}
</style>
